<template>
	<!-- 个人资料弹窗 -->
	<u-popup :show="showProfile" :round="10" mode="bottom" @close="close">
		<view class="profile-content">
			<u-avatar :src="selectedUser.avatar" size="40"></u-avatar>
			<view class="profile-info">
				<view class="profile-info-left">
					<text class="profile-name">{{ selectedUser.name }}</text>
					<text class="profile-desc">{{ selectedUser.description }}</text>
				</view>
				<!-- <u-button :icon="isFollowed ? 'heart-fill': 'heart'" size="small" :type="isFollowed ? 'success' : 'primary'" @click="toggleFollow(isFollowed)">
				</u-button> -->
				<u-icon @click="isFollowedClick" v-if="isFollowed" name="heart-fill" size="28" color="#5ac752" />
				<u-icon @click="isFollowedClick" v-else name="heart" size="28" color="#3c9cff" />
			</view>
		</view>
		<u-button type="primary" @click="handleSignUp">报名</u-button>
		<!-- 报名资费提示 -->
		<u-modal @cancel="cancelModal" :show="showFeeModal" :title="feeTitle" :content="feeContent" show-cancel-button @confirm="handlePayment"></u-modal>
	</u-popup>
</template>

<script>
	export default {
		// props
		props: {
			showProfile: {
				type: Boolean,
				default: false
			},
			selectedUser: {
				type: Object,
				default: () => {
					return {
						name: '',
						description: '',
						isFollowed: false
					}
				}
			}
		},
		data() {
			return {
				isFollowed: false,
				showFeeModal: false, // 是否显示资费提示弹窗
				feeTitle: '', // 资费提示标题
				feeContent: '', // 资费提示内容
			}
		},
		methods: {
			close() {
				this.$emit('closePopup')
			},
			isFollowedClick() {
				this.isFollowed = !this.isFollowed
				this.$u.toast(this.isFollowed ? '关注成功' : '已取消关注');
				if (this.isFollowed != this['selectedUser']['isFollowed']) this.$emit('qxgzEmit')
			},
			// 处理报名
			handleSignUp() {
				if (this.selectedUser.gender === 'female') {
					this.feeTitle = '报名提示';
					this.feeContent = '女生报名免费，是否确认报名？';
				} else {
					this.feeTitle = '报名提示';
					this.feeContent = '男生报名需支付 19.9 元，是否确认报名？';
				}
				this.showFeeModal = true;
			},
			// 取消报名
			cancelModal(){
				this.showFeeModal = false;
				this.$u.toast('已取消报名');
			}
		},
		created() {
			this.isFollowed = this['selectedUser']['isFollowed']
		}
	}
</script>

<style lang="scss" scoped>
	.profile-content {
		display: flex;
		padding: 10px 20px;
		align-items: center;

		.profile-info {
			margin-left: 10px;
			flex: 1;
			display: flex;
			justify-content: space-between;

			.profile-info-left {
				display: flex;
				flex-direction: column;

				.profile-name {
					font-size: 20px;
				}

				.profile-desc {
					font-size: 12px;
					color: #888;
				}
			}
		}
	}
</style>